iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0

挑戰目標: MockNative Camp


最近這兩年在工作上一直想要有同事可以交流進步,或者是遇到可以學習的同事,但終究在這兩份工作中都屬於自己一個人單打獨鬥,自己上網學習然後實作並部署上去,也不知道自己做的到底好不好,像是現在從零開始的前端專案,自己照著後端學習前端的觀念開始做,也一路做了三個月,一直覺得技術債越積越深,在開始開發不同模塊時,總會覺得這個真的是可以給使用者使用的嗎,總是會懷疑自己的前端專案架構等等的,但好像也沒有同事可以幫忙review,只好繼續累積業障了呢。

今天來研究第一個section,
https://ithelp.ithome.com.tw/upload/images/20211002/20140358hobqWrBC02.png
可以看到分成左右兩個區塊,所以我們section也這樣分,首先新增一個section folder然後建立SectionOne.js,並在Sections.js中引用。
https://ithelp.ithome.com.tw/upload/images/20211002/20140358iGwPNa331m.png

Sections.js

import SectionOne from './section/SectionOne'

function Sections() {
    return (
        <div className="w-screen">
            <SectionOne />
        </div>
    )
}

export default Sections

SectionOne.js

import Image from "next/image";

function SectionOne() {
    return (
        <div className="w-full">
            {/* Left */}
            <div className="">
                <Image
                    src="	https://nativecamp.net/user/images/index/zh-tw/top-1.jpg"
                    width={1063}
                    height={685}
                />
            </div>
            {/* Right */}
            <div> </div>
        </div>
    )
}

export default SectionOne

這邊要花時間研究一下clipPath因為Native Camp使用這個去達到圖片遮罩的效果,目前還在研究如何用React去實作他。
https://ithelp.ithome.com.tw/upload/images/20211002/20140358Ucq17aa8ko.png
所以目前的成果只有
https://ithelp.ithome.com.tw/upload/images/20211002/20140358Jo7XBabsx6.png

CSS真的是太博大精深了,想要隨心所欲的製作網頁需要花很多時間去研究,但我身邊寫前端的朋友都要我不要碰這個坑XD


上一篇
[Day 16]新試劑服英戰士(前端篇)
下一篇
[Day 18]所以我說那個醬汁呢(前端篇)
系列文
關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言